<template>
 <div class="header-container">
   <div class="logo-area">
     <img :src="imgUrl" class="logo-icon" >
     <span class="system-title">二手书交易平台</span>
   </div>
   <div style="flex: 1"></div>
   <div class="user-area">
     <el-dropdown>
      <span class="el-dropdown-link">
        <el-avatar :size="32" :src="user.avatar" style="margin-right: 8px; background: var(--color-primary)">{{ user.nickName ? user.nickName.charAt(0) : 'U' }}</el-avatar>
        {{user.nickName}} <el-icon class="el-icon--right"><arrow-down /></el-icon>
      </span>
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item @click="$router.push('/person')">个人信息</el-dropdown-item>
           <el-dropdown-item @click="exit">退出系统</el-dropdown-item>
         </el-dropdown-menu>
       </template>
     </el-dropdown>
   </div>
 </div>
</template>

<script>
import {ElMessage} from "element-plus";

export default {
  name: "Header",
  props: ['user'],
  data(){
    return{
      user:[],
      imgUrl:require("../assets/icon/login.png")
    }
  },
  created(){
    let userStr = sessionStorage.getItem("user")||"{}"
    this.user = JSON.parse(userStr)
  },
  methods:{
    exit(){
      sessionStorage.removeItem("user")
      this.$router.push("/login")
      ElMessage.success("退出系统成功")
    }
  }

}
</script>

<style scoped>
.header-container {
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  background-color: var(--color-bg-white);
  padding: 0 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.logo-area {
  width: 240px;
  display: flex;
  align-items: center;
  font-weight: bold;
  color: var(--color-primary);
  font-size: 18px;
}

.logo-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.user-area {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  color: var(--color-text-primary);
}
</style>

<style scoped>
.icon {
  width: 40px;
  height: 40px;
  padding-top: 5px;
  padding-right: 10px;
}
</style>